import { onMounted, onUnmounted,computed } from "vue";
import createContextMenu,{ActionItem} from "./createContextMenu";
import DataOperation,{operationText} from '@/plugins/dataOperations'
import { GlobalDataProps } from "@/store";
import { useStore } from "vuex";
import { pick } from "lodash-es";
const initContextMenu = () => {
    console.log("initContextMenu");
    const store = useStore<GlobalDataProps>();
    const currentId = computed(() => store.state.editor.currentElement)
    const operations = DataOperation(currentId)
    const actions = Object.entries(operations).filter(([key,value])=>{
        if(['copy','delete','paste'].includes(key)){
            return true
        }
        return false
    }).map(([key, value]) => {
        console.log(key, value);
        const temp = {
            text: operationText[key].text,
            shortcut: operationText[key].shortcut,
            action: value
        } as ActionItem
        return temp
    });
    console.log(actions);


    const testActions: ActionItem[] = [
        {
            text: "删除图层",
            shortcut: "Backspace / Delete",
            action: (cid) => {
                store.commit('deleteComponent',cid)
            }
        }
    ]

    let destory: any;
    let destory2: any;
    onMounted(() => {
        // destory = createContextMenu(testActions)
        destory2 =  createContextMenu(actions,'preview-container')
    })

    onUnmounted(() => {
        // destory()
        destory2()
    })
    //todo 应该要返回选中的元素, 因为不是通过vue sfc实现
}

export default initContextMenu